<template>
	<div>
		<head-top></head-top>
		<el-row style="margin-top: 20px;">
			<el-col :span="14" :offset="4">
				<header class="form_header">基本信息</header>
				<el-form :model="dialogVisibleObj" ref="dialogVisibleform" label-width="110px" class="form food_form" size="mini">
					<el-row>
						<el-col :span="10">
							<el-form-item label="企业名称:">
								<el-input v-model="dialogVisibleObj.customname"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="1">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="13">
							<el-form-item label="企业类型:">
								<el-select @change="selectGet" v-model="dialogVisibleObj.customtypename" placeholder="请选择">
									<el-option v-for="item in figtype" :key="item.configtypevalue" :label="item.configtypename" :value="item.configtypevalue">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="企业主页:">
								<el-input v-model="dialogVisibleObj.siteurl"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="1">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="13">
							<el-form-item label="状态:">
								<el-switch v-model="dialogVisibleObj.customstatus" :active-value="1" :inactive-value="0" active-text="启用"
								 inactive-text="禁用">
								</el-switch>
							</el-form-item>
						</el-col>
					</el-row>
					<header class="form_header">门户信息</header>
					<el-row>
						<el-col :span="10">
							<el-form-item label="法人代表:">
								<el-input v-model="dialogVisibleObj.bossname"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="1">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="13">
							<el-form-item label="注册日期:">
								<el-date-picker v-model="dialogVisibleObj.regdatetime" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="证件号码:">
								<el-input v-model="dialogVisibleObj.cardnum"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="1">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="13">
							<el-form-item label="证件类型:">
								<el-select @change="selectsix" v-model="dialogVisibleObj.cardtypename" placeholder="请选择">
									<el-option v-for="i in sixtype" :key="i.configtypevalue" :label="i.configtypename" :value="i.configtypevalue">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="国家:">
								<el-input v-model="dialogVisibleObj.country"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="1">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="13">
							<el-form-item label="地区:">
								<el-cascader placeholder="试试搜索:浏阳..." size="large" :options="options" v-model="selectedOptions" @change="handleChange"
								 filterable clearable>
								</el-cascader>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="公司传真:">
								<el-input v-model="dialogVisibleObj.companyfax"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="1">
							<el-divider direction="vertical"></el-divider>
						</el-col>
						<el-col :span="13">
							<el-form-item label="公司电话:">
								<el-input v-model="dialogVisibleObj.companytel"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-form-item label="公司地址:">
							<el-input v-model="dialogVisibleObj.companyaddress"></el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="备注:">
							<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="dialogVisibleObj.memo">
							</el-input>
						</el-form-item>
					</el-row>
					<header class="form_header">联系人信息<el-button style="float: right; padding: 3px 0" type="text" @click="dialogFormVisible = true">添加一个联系人</el-button>
					</header>
					<el-dialog title="添加联系人" :visible.sync="dialogFormVisible">
						<el-form :model="objascontactsObj">
							<el-form-item label="联系人姓名" :label-width="formLabelWidth">
								<el-input v-model="objascontactsObj.contactname" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="联系人电话 " :label-width="formLabelWidth">
								<el-input v-model="objascontactsObj.contacttel" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="联系人传真" :label-width="formLabelWidth">
								<el-input v-model="objascontactsObj.contactfax" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="邮箱" :label-width="formLabelWidth">
								<el-input v-model="objascontactsObj.contactemail" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="联系人职务" :label-width="formLabelWidth">
								<el-input v-model="objascontactsObj.contactrole" autocomplete="off"></el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="addContactobj">确 定</el-button>
						</div>
					</el-dialog>
					<el-table :data="objascontacts" style="width: 100%" height="250">
						<el-table-column label="姓名" width="170">
							<template slot-scope="scope">
								<el-popover trigger="hover" placement="top">
									<p>姓名: {{ scope.row.contactname }}</p>
									<p>传真: {{ scope.row.contactfax }}</p>
									<p>邮箱: {{ scope.row.contactemail }}</p>
									<div slot="reference" class="name-wrapper">
										<el-tag size="medium">{{ scope.row.contactname }}</el-tag>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="contacttel" label="电话" width="150">
						</el-table-column>
						<el-table-column prop="contactrole" label="职务" width="100">
						</el-table-column>
						<el-table-column label="操作" width="200">
							<template slot-scope="scope">
								<el-button slot="reference" type="primary" @click="deleteObj(scope.$index)" size="mini" round>删除<i class="el-icon-delete el-icon--right"></i></el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row>
						<el-col :span="12">
							<el-form-item>
								<el-button type="primary" @click="save()">保存<i class="el-icon-folder-checked el-icon--right"></i></el-button>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item>
								<el-button type="primary" @click="closeup()">重置<i class="el-icon-refresh-right el-icon--right"></i></el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import headTop from '@/components/headTop'
	import {
		findconfigTypeFives,
		findconfigTypeSix,
		addCustoms,
		addContacts,
		findAll
	} from '@/api/getData'
	// 1、provinceAndCityData是省市二级联动数据（不带“全部”选项）；
	// 2、regionData是省市区三级联动数据（不带“全部”选项）；
	// 3、provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）；
	// 4、regionDataPlus是省市区三级联动数据（带“全部”选项）；
	// 5、"全部"选项绑定的value是空字符串""；
	// 6、CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市；
	// 7、TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105。
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	import {
		baseUrl,
		baseImgPath
	} from '@/config/env'
	export default {
		data() {
			return {
				formLabelWidth: '120px',
				//联系人对话框
				dialogFormVisible: false,
				//证件类型下拉框绑定的对象
				sixobj: {},
				//公司类型下拉框绑定的对象
				figobj: {},
				//公司类型
				figtype: [],
				//证件类型
				sixtype: [],
				options: regionData,
				//地区初始化数据
				selectedOptions: [],
				//送走的联系人集合
				objascontacts: [],
				//详细信息对象
				dialogVisibleObj: {},
				//联系人集合
				objascontactsObj: {},
			}
		},
		components: {
			headTop,
		},
		created() {
			this.initForm();
		},
		watch:{
		  $route(to,from){
		      if(to.path=="/addascustoms"){
		        this.initForm();
		    }
		  }
		},
		computed: {
			...mapState(['adminInfo']),
		},
		methods: {
			//删除联系人集合
			deleteObj(index) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.objascontacts.splice(index, 1)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			//添加到联系人集合
			addContactobj() {
				this.dialogFormVisible = false;
				this.objascontacts.push(this.objascontactsObj);
				this.objascontactsObj = {}
			},
			//获得公司类型下拉框选取值
			selectGet(vId) { //这个vId也就是value值
				this.figobj = this.figtype.find((item) => { //这里的userList就是上面遍历的数据源
					return item.configtypevalue === vId; //筛选出匹配数据
				});
			},
			//获得证件类型下拉框选取值
			selectsix(vId) { //这个vId也就是value值
				this.sixobj = this.sixtype.find((item) => { //这里的userList就是上面遍历的数据源
					return item.configtypevalue === vId; //筛选出匹配数据
				});
			},
			//保存方法
			async save() {

				this.dialogVisibleObj.regdatetime = this.dialogVisibleObj.regdatetime.getTime();
				console.log(this.dialogVisibleObj.regdatetime)
				this.dialogVisibleObj.agentid = this.adminInfo.user.id;
				this.dialogVisibleObj.agentname = this.adminInfo.user.username;
				this.dialogVisibleObj.agentcode = this.adminInfo.user.usercode;
				this.dialogVisibleObj.cardtypename = this.sixobj.configtypename;
				this.dialogVisibleObj.cardtype = this.sixobj.configtypevalue;
				this.dialogVisibleObj.customtypename = this.figobj.configtypename;
				this.dialogVisibleObj.customtype = this.figobj.configtypevalue;
				const rowsum = await addCustoms(this.dialogVisibleObj);
				const Customslist = await findAll();
				for (var i = 0; i < this.objascontacts.length; i++) {
					this.objascontacts[i].customid = Customslist[Customslist.length - 1].id
					const cc = await addContacts(this.objascontacts[i])
				}
				this.$router.push({
					path: '/ascustomsList'
				})
			},
			//返回上一层并且清除页面数据
			closeup(reffrom) {
				this.objascontacts = [];
				//详细信息对象
				this.dialogVisibleObj = {};
			},
			//通过CodeToText可以将区域码转为汉字
			handleChange(val) {
				this.dialogVisibleObj.province = TextToCode[CodeToText[val[0]]].code;
				this.dialogVisibleObj.city = TextToCode[CodeToText[val[0]]][CodeToText[val[1]]].code;
				this.dialogVisibleObj.area = TextToCode[CodeToText[val[0]]][CodeToText[val[1]]][CodeToText[val[2]]].code;
			},
			async initForm() {
				//企业类型
				const figtype = await findconfigTypeFives();
				this.figtype = figtype;
				//证件类型
				const sixtype = await findconfigTypeSix();
				this.sixtype = sixtype;
			},
		}
	}
</script>

<style lang="less">
	@import '../style/mixin';

	.form {
		min-width: 400px;
		margin-bottom: 30px;

		&:hover {
			box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
			border-radius: 6px;
			transition: all 400ms;
		}
	}

	.food_form {
		border: 1px solid #eaeefb;
		padding: 10px 10px 0;
	}

	.form_header {
		text-align: center;
		margin-bottom: 10px;
	}

	.category_select {
		border: 1px solid #eaeefb;
		padding: 10px 30px 10px 10px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}

	.add_category_row {
		height: 0;
		overflow: hidden;
		transition: all 400ms;
		background: #f9fafc;
	}

	.showEdit {
		height: 185px;
	}

	.add_category {
		background: #f9fafc;
		padding: 10px 30px 0px 10px;
		border: 1px solid #eaeefb;
		border-top: none;
	}

	.add_category_button {
		text-align: center;
		line-height: 40px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border: 1px solid #eaeefb;
		border-top: none;
		transition: all 400ms;

		&:hover {
			background: #f9fafc;

			span,
			.edit_icon {
				color: #20a0ff;
			}
		}

		span {
			.sc(14px, #999);
			transition: all 400ms;
		}

		.edit_icon {
			color: #ccc;
			transition: all 400ms;
		}
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 120px;
		height: 120px;
		display: block;
	}

	.cell {
		text-align: center;
	}
</style>
